<script setup lang="ts">
import { reactive, ref } from "vue";
import type { FormInstance } from "element-plus";
//import { ElMessage } from "element-plus";
//import { Plus } from "@element-plus/icons-vue";
//import type { UploadProps } from "element-plus";
import { saveSystemInfo } from "@/api/systemcofig";
import { message } from "@/utils/message";
import { useSystemInfo } from "../login/utils/hook";
//import httUrl from "@/utils/http/address";
import { uploadPic } from "@/api/system";

defineOptions({
  name: "SystemInformation"
});
const {
  verison,
  logoImage,
  leftimage,
  systemId,
  systemName,
  bgColor,
  fontColor
} = useSystemInfo();
const xtszFormRef = ref<FormInstance>();
const fType = ref(1);
const uploadInput = ref();
//const imageUrl = ref("");
//const imageUrlleft = ref("");
//const url_one = httUrl + "/api/System/uploadSysImage?fType=1";
//const url_tow = httUrl + "/api/System/uploadSysImage?fType=2";
const ruleForm = reactive({
  id: "1",
  sysName: systemName,
  sysVersion: verison,
  bgColor: bgColor,
  fontColor: fontColor
});
//图片上传成功
/*
const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!);
  message(response.result.message, { type: "success" });
};

const handleAvatarSuccessLeft: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  imageUrlleft.value = URL.createObjectURL(uploadFile.raw!);
  message(response.result.message, { type: "success" });
};
//图片上传前检查格式和大小
const beforeAvatarUpload: UploadProps["beforeUpload"] = rawFile => {
  // if (rawFile.type !== "image/jpeg/jpg/png") {
  //   ElMessage.error("图片格式错误");
  //   return false;
  // } else if (rawFile.size / 1024 / 1024 > 2) {
  //   ElMessage.error("图片大小超过2MB!");
  //   return false;
  // }
  // return true;
  if (rawFile.size / 1024 < 1) {
    ElMessage.error("图片大小超过2MB!");
  }
  return true;
};*/
//点击提交
const forminput = ref();
const submit = async () => {
  const result = await saveSystemInfo(ruleForm);
  if (result.isSuccess == true) {
    message("系统设置成功", { type: "success" });
    //forminput.value.resetFields();
  }
};
const openDialog = data => {
  fType.value = data;
  uploadInput.value.click();
};
const handleFileChange = event => {
  const file = event.target.files[0];
  if (file && file instanceof File) {
    const reader = new FileReader();
    reader.onloadend = async () => {
      const newForm = new FormData();
      newForm.append("file", file);

      const Result = await uploadPic(newForm, fType.value);
      if (Result.isSuccess) {
        message(Result.result, { type: "success" });
        if (fType.value == 1) {
          leftimage.value = reader.result;
        } else {
          logoImage.value = reader.result;
        }
      } else {
        message(Result.msg, { type: "error" });
      }
    };
    reader.readAsDataURL(file);
  }
};
</script>

<template>
  <div class="system">
    <el-form ref="forminput" :model="ruleForm" size="large">
      <el-form-item label="系统编码" prop="id">
        <el-input
          :placeholder="systemId.toString()"
          clearable
          v-model="ruleForm.id"
        />
      </el-form-item>
      <el-form-item label="系统名称" prop="sysName">
        <el-input
          :placeholder="systemName"
          clearable
          v-model="ruleForm.sysName"
        />
      </el-form-item>
      <el-form-item label="登录左图" prop="sysliPIC">
        <!--
        <el-upload
          class="avatar-uploader"
          :action="url_one"
          :show-file-list="false"
          :on-success="handleAvatarSuccessLeft"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrlleft" :src="imageUrlleft" class="avatar" />
          <img v-else :src="leftimage" class="avatar" />
          <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
        -->
        <img
          :src="leftimage"
          class="avatar"
          alt="上传图片"
          style="width: 200px; height: 150px; border: 1px solid #ccc"
          @click="openDialog(1)"
        />
        <input
          ref="uploadInput"
          type="file"
          style="display: none"
          @change="handleFileChange"
        />
      </el-form-item>

      <el-form-item label="系统图标" prop="syslOGIN">
        <!--
        <el-upload
          class="avatar-uploader"
          :action="url_tow"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <img v-else :src="logoImage" class="avatar" />
          <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
        -->
        <img
          :src="logoImage"
          class="avatar"
          alt="上传图片"
          style="width: 200px; border: 1px solid #ccc"
          @click="openDialog(2)"
        />
      </el-form-item>
      <el-form-item label="背景色" prop="bgColor">
        <el-color-picker v-model="ruleForm.bgColor" />
      </el-form-item>
      <el-form-item label="前景色" prop="fontColor">
        <el-color-picker v-model="ruleForm.fontColor" />
      </el-form-item>
      <el-form-item label="版本信息" prop="sysVersion">
        <el-input
          type="textarea"
          clearable
          v-model="ruleForm.sysVersion"
          :placeholder="verison"
        />
      </el-form-item>

      <el-form-item>
        <el-button
          class="w-full mt-4"
          size="default"
          type="primary"
          @click="submit(xtszFormRef)"
        >
          提交
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
.system {
  width: 600px;
}

.avatar-uploader .avatar {
  display: block;
  width: 178px;
  height: 178px;
}
</style>

<style>
.avatar-uploader .el-upload {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  width: 178px;
  height: 178px;
  font-size: 28px;
  color: #8c939d;
  text-align: center;
}
</style>
